<template>
  <view>
    <view class="flex justify-between uni-pa-4 bg-white">
      <view class="flex items-center" @click="goto('/pages/author/index?userId=' + note.userId)">
        <image class="w-5 h-5 rounded-full" :src="note.user.avatar" mode="aspectFill"></image>
        <view class="uni-ml-1">
          {{ note.user.name }}
          <text class="uni-px-4 text-gray-500">{{ userId == note.userId ? '(我)' : '' }}</text>
        </view>
      </view>
      <view v-if="userId != note.userId" @click="focusUser(note.user.id, userId, note.isFocus)"
        class="border-red-700 border border-solid text-center rounded-3xl w-16 text-xs uni-py-2 text-red-600">
        {{ note.isFocus ? '已關注' : '關注' }}</view>
    </view>
    <!--    <swiper v-if="note.carousel.length > 0" :style="{ height: maxImgHeight + 'px' }" indicator-dots
      indicator-color="#ffcdce" indicator-active-color="#ff6165"> -->
    <!--   <swiper-item v-for="(item, index) in note.carousel" :key="index">
        <view class="h-full w-full flex items-center"> -->
    <!--  <image style="width: 100%;" :src="item" mode="widthFix" /> -->
    <video style="width: 100%;" :src="note.videoUrl" controls></video>
    <!-- <video style="width: 100%;" :src="note.videoUrl" controls object-fit="cover"></video>  -->

    <!-- </view> -->
    <!-- </swiper-item>
    </swiper> -->
    <view class="uni-pa-4 bg-white">
      <view class="text-lg font-semibold uni-my-4">{{ note.title }}</view>
      <rich-text :nodes="note.content ? note.content.replace(/\n/g, '<br>') : '-'"></rich-text>
      <view class="uni-my-4">
        <text v-for="(item, index) in note.topic" :key="index" class="uni-px-2 font-semibold text-blue-900">#{{ item
          }}</text>
      </view>
      <view class="uni-my-4">
        <text class="text-gray-500">{{ note.createdAt }}</text>
        <text @click="deleteNote(note.id)" v-if="userId === note.user.id"
          class="uni-px-4 text-blue-900 underline">刪除</text>
      </view>
    </view>
    <Comment :noteId="noteId" :userId="userId" :avatar="avatar" />
    <view class="fixed bottom-0 left-0 w-full bg-white uni-pb-10">
      <uni-row class="bg-white uni-pa-4">
        <uni-col :span="12">
          <view @click="comment"
            class="w-30 border-gray-300 border border-solid  text-gray-600 rounded-xl text-xs uni-pa-3">
            說點什麼吧，萬一火了呢~</view>
        </uni-col>
        <uni-col :span="12" style="height: 35px;">
          <view class="flex justify-between items-center h-full">
            <view class="flex items-center">
              <uni-icons @click="toLike" :type="note.isLike ? 'heart-filled' : 'heart'"
                :color="note.isLike ? 'red' : ''" size="30px"></uni-icons>
              <text>{{ note.like }}</text>
            </view>
            <view class="flex items-center">
              <uni-icons @click="toFavorite" :type="note.isFavorite ? 'star-filled' : 'star'"
                :color="note.isFavorite ? 'orange' : ''" size="30px"></uni-icons>
              <text>{{ note.favorite }}</text>
            </view>
            <view class="flex items-center">
              <uni-icons type="chat" size="30px"></uni-icons>
              <text>{{ note.msg }}</text>
            </view>
          </view>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>

<script>
import Comment from '@/components/Comment'
import {
  httpNoteDetail,
  httpUserToLike,
  httpUserToFavorite,
  httpUserFocus,
  httpNoteDelete
} from '@/utils/api.js'
export default {
  components: { Comment },
  data() {
    return {
      note: {
        carousel: [],
        title: '',
        content: '',
        user: {},
        msg: 0
      },
      maxImgHeight: 150,
      isLike: false,
      isFavorite: false,
      noteId: '',
      userId: '',
      user: {}
    }
  },
  onLoad(options) {
    const user = getApp().globalData.user
    this.userId = user.userId || user.id
    this.avatar = user.avatar
    // 获取筆記id
    this.noteId = options.id
    this.getNoteDetail(this.noteId, this.userId)
  },
  methods: {
    // 刪除筆記
    deleteNote(noteId) {
      uni.showModal({
        title: '確認刪除该筆記？',
        success: async (res) => {
          if (res.confirm) {
            const { code, message } = await httpNoteDelete(noteId, this.userId)
            if (code === 200) {
              uni.showToast({
                title: '刪除成功',
                icon: 'none'
              })
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }, 1000)
            } else {
              uni.showToast({
                title: message,
                icon: 'none'
              })
            }
          }
        }
      })
    },
    goto(url) {
      uni.navigateTo({
        url
      })
    },
    // 评论
    comment() {
      uni.$emit('comment')
    },
    // 關注用户
    async focusUser(userId, fansId, isFocus) {
      if (isFocus) {
        uni.showModal({
          title: '確認不再關注？',
          success: async (res) => {
            if (res.confirm) {
              const { code } = await httpUserFocus(userId, fansId, true)
              if (code === 200) {
                this.getNoteDetail(this.noteId, this.userId)
              }
            }
          }
        })
      } else {
        const { code } = await httpUserFocus(userId, fansId)
        if (code === 200) {
          this.getNoteDetail(this.noteId, this.userId)
        }
      }
    },
    // 点赞
    async toLike() {
      this.isLike = !this.isLike
      if (this.isLike) {
        const { code } = await httpUserToLike(this.userId, this.noteId)
        if (code === 200) {
          this.getNoteDetail(this.noteId, this.userId)
        }
      } else {
        const { code } = await httpUserToLike(this.userId, this.noteId, true)
        if (code === 200) {
          this.getNoteDetail(this.noteId, this.userId)
        }
      }

    },
    // 收藏
    async toFavorite() {
      this.isFavorite = !this.isFavorite
      if (this.isFavorite) {
        const { code } = await httpUserToFavorite(this.userId, this.noteId)
        if (code === 200) {
          this.getNoteDetail(this.noteId, this.userId)
        }
      } else {
        const { code } = await httpUserToFavorite(this.userId, this.noteId, true)
        if (code === 200) {
          this.getNoteDetail(this.noteId, this.userId)
        }
      }
    },
    // 获取详情
    async getNoteDetail(id, userId) {
      const { code, data } = await httpNoteDetail(id, userId)
      if (code === 200) {
        this.note = { ...data }
        this.note.videoUrl = this.note.carousel[0].split('.jpg')[0]+'.mp4'
        // this.note.videoUrl = "../../../../../static/名侦探柯南国语版第01集全集高清免费在线观看完整版_55影院_3403216872.mp4"
        // 动态计算轮播图高度- start
        // 获取图片高度
        // 获取屏幕宽度
        // let windowWidth = 0
        // uni.getSystemInfo({
        //   success: res => {
        //     // console.log(res.windowWidth)
        //     windowWidth = res.windowWidth
        //   }
        // })
        // this.note.carousel.forEach(item => {
        //   uni.getImageInfo({
        //     src: item,
        //     success: (image) => {
        //       //   console.log(image.height * windowWidth / image.width)
        //       let currentHeight = image.height * windowWidth / image.width
        //       if (currentHeight > this.maxImgHeight) {
        //         // 获取最大高度
        //         this.maxImgHeight = currentHeight
        //       }
        //     }
        //   })
        // })
        // 动态计算轮播图高度- end
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>